{extend name='common/common' /}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		<span class="span-warning">{$Company.name|default=''}</span>
		网店列表
		{if authCheck('webshop/addwebshop')}
		<el-button class="header-btn" type="primary" size="small"
			icon="el-icon-plus" plain @click="addRow"> 添加网店</el-button>
		{/if}
		<el-button class="header-btn" type="info" size="small"
			icon="el-icon-back" plain @click="history.back(-1)"> 企业列表</el-button>
	</div>
	<div class="el-card-content">
		<el-table :data="table.tableData" border>
			<el-table-column align="center" prop="id" label="序号" width="50"></el-table-column>
			<el-table-column align="center" label="网店名称" prop="name"></el-table-column>
			<el-table-column align="center" label="网店网址" prop="url"></el-table-column>
			<el-table-column align="center" label="网店简介" prop="remark"></el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					{if authCheck('webshop/webshoplistincompany')}
					<el-tooltip content="编辑网店" open-delay="500" hide-after="1500" placement="left">
						<el-button
							@click="editRow(scope.row)" circle
							size="mini" plain type="success"
							icon="el-icon-edit-outline">
						</el-button>
					</el-tooltip>
					{/if}
					{if authCheck('webshop/delwebshop')}
					<el-tooltip content="删除网店" open-delay="500" hide-after="1500" placement="right">
						<el-button
							@click="delRow(scope.row)" circle
							size="mini" plain type="danger"
							icon="el-icon-delete">
						</el-button>
					</el-tooltip>
					{/if}
				</template>
			</el-table-column>
		</el-table>
		<div class="table-page">
			<el-pagination
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="table.pageNumber"
				:page-sizes="[10, 20, 50, 75]"
				:page-size="table.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="table.tableTotal">
			</el-pagination>
		</div>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		rptDate:"",
		table:{
			tableData:"",
			pageSize:10,
			pageNumber:1,
			tableTotal:0,
		}
	},
	mounted:function() {
		this.getTable();
	},
	methods:{
		getTable() {
			this.loading=true;
			var param = {
				pageSize:this.table.pageSize,
				pageNumber:this.table.pageNumber,
				companyId:"{$Company.id|default='0'}"
			};
			$.post('{:url("Webshop/webshopListInCompany")}',param,function(res){
				main.loading=false;
				if(res.code == 1){
					main.$message({message: res.msg,type: 'success'});
					main.table.tableData = res.data.rows;
					main.table.tableTotal = res.data.total;
				}else{
					main.$notify.error({title: '失败',message: res.msg});
				}
			});
		},
		pageSizeChange(val) {
			this.table.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.table.pageNumber = val;
			this.getTable();
		},
		addRow() {
			var form = {
				name:"",url:"",
				create_uid:"{$Company.create_uid}",
				company_id:"{$Company.id}",
				depart_id:"{$Company.depart_id}",
				depart_name:"{$Company.depart_name}"
			};
			webshopFormBox.header = "添加网店";
			webshopFormBox.form = form;
			webshopFormBox.is_show = true;
			webshopFormBox.ask_type = "add";
		},
		editRow(row) {
			webshopFormBox.header = "编辑 "+row.name+" 网店";
			webshopFormBox.form = row;
			webshopFormBox.is_show = true;
			webshopFormBox.ask_type = "edit";
		},
		delRow(row) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				$.post('{:url("Webshop/delWebshop")}',{
					id:row.id
				},function(res) {
					webshopFormBox.ajaxResponse(res);
				});
			}).catch(() => {
				this.$notify.info({title:'消息',message:'已取消删除'});
			});
		}
	}
})
</script>
{/block}


{block name="component"}
<div id="webshopFormBox">
	<el-dialog :title="header" :visible.sync="is_show" top="15vh">
		<div class="formBox">
			<el-form label-width="100px" :model="form" :rules="webshop_form_rules" ref="webshop_form_ref">
				<el-form-item label="网店名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入网店名称"></el-input>
				</el-form-item>
				<el-form-item label="网店地址" prop="url">
					<el-input v-model="form.url" placeholder="请输入网店网址"></el-input>
				</el-form-item>
				<el-form-item label="网店简介" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入网店简介"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="is_show = false">取消</el-button>
			<el-button type="success" @click="subForm">确定</el-button>
		</div>
	</el-dialog>
</div>
<script type="text/javascript">
var webshopFormBox = new Vue({
	el:"#webshopFormBox",
	data:{
		header:"添加",
		is_show:false,
		ask_type:"add",
		form:{
			name:"",url:"",remark:"",
			create_uid:"{$Company.create_uid}",
			company_id:"{$Company.id}",
			depart_id:"{$Company.depart_id}",
			depart_name:"{$Company.depart_name}"
		},
		webshop_form_rules:{
			name:[{required:true,message:'请输入网店名称',trigger:['blur','change']}],
			url:[{required:true,message:'请输入网店网址',trigger:['blur','change']}],
			remark:[{max:50,message:'最多输入50个字符',trigger:['blur','change']}],
		}
	},
	methods:{
		subForm() {
			if(this.ask_type == "add"){
				var url = '{:url("Webshop/addWebshop")}';
			}else{
				var url = '{:url("Webshop/editWebshop")}';
			}
			var param = this.form;
			this.$refs['webshop_form_ref'].validate((valid) => {
				if (valid) {
					$.post(url,param,function(res) {
						webshopFormBox.ajaxResponse(res);
						if(res.code == 1){
							webshopFormBox.$refs['webshop_form_ref'].resetFields();
						}
					});
				}
			})
		},
		ajaxResponse(res) {
			if(res.code == 1){
				webshopFormBox.is_show = false;
				main.$notify({title:"成功",type:"success",message:res.msg});
				main.getTable();
			}else{
				main.$notify.error({title:"错误",message:res.msg});
			}
		}
	}
})
</script>
{/block}
